<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动</title>
		<style>
			#main>div {
				height: 100px;
				width: 100px;
				margin: 10px;
				border: 1px solid red;
				float: left;
			}
			div#d16:hover{
				background-color: #008C86;
			}
			#main{
				border: 2px groove black; 
			}
			.clear:after{
				display: block;
				height: 0;
				content: '';
				clear: both;
			}
		</style>
	</head>
	<body>
		<!-- 采用外部套一个大元素 -->
		<div id="main" class="clear">
			<div id="d1">1</div>
			<div id="d2">2</div>
			<div id="d3">3</div>
			<div id="d4">4</div>
			<div id="d5">5</div>
			<div id="d4">6</div>
			<div id="d5">5</div>
			<div id="d4">4</div>
			<div id="d5">5</div>
			<div id="d4">4</div>
			<div id="d5">5</div>
			<div id="d4">4</div>
			<div id="d4">4</div>
			<div id="d5">5</div>
			<div id="d4">4</div>
			<div id="d4">4</div>
			<div id="d5">5</div>
			<div id="d4">4</div>
			<div id="d4">4</div>
			<div id="d5">5</div>
			<div id="d4">4</div>
			<div id="d4">4</div>
			<div id="d5">5</div>
			<div id="d4">4</div>
			<div id="d4">4</div>
			<div id="d5">5</div>
			<div id="d4">4</div>
			<div id="d4">4</div>
			<div id="d5">5</div>
			<div id="d4">4</div>
			<div id="d4">4</div>
			<div id="d5">5</div>
			<div id="d4">4</div>
			<div id="d4">4</div>
			<div id="d5">5</div>
			<div id="d16">4</div>
		</div>
		 
			<h1 style="width: 220px; border: 1px solid green;margin:4px">
				we love java9
			</h1>
	</body>
</html>
